<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-08-17 14:37:28
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-09-12 11:05:53
 * @FilePath: \出口卖家端\src\views\SettleAccount\TaxRefundSettlement\components\c-drawback-details.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 确认退税 -->
  <el-dialog
    v-model="dialogVisible"
    title="退税明细"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      v-loading="loading"
  
      status-icon
    >
      <el-row :gutter="24" v-if="ruleForm.sellerTaxRefundList && ruleForm.sellerBankList">
        <el-col :span="12">
          <el-form-item label="退税金额：">
            {{ filters.thousands(ruleForm.sellerTaxRefundList.amount) }}元
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出口申请单号：">
            {{ruleForm.sellerTaxRefundList.carOutApplyId}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结算银行：">
            {{ruleForm.sellerBankList.bankName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行账号：">
            {{ruleForm.sellerBankList.accountNo}}
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.sellerTaxRefundList.payUrl">
          <el-form-item label="支付凭证：">
            <el-button link size="small" class="mr-sm" type="primary" 
            @click="onFileOpen(ruleForm.sellerTaxRefundList.payUrl)">
              <span>查看</span>
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.sellerTaxRefundList.billUrl">
          <el-form-item label="退税单：">
            <el-button link size="small" class="mr-sm" type="primary" 
            @click="onFileOpen(ruleForm.sellerTaxRefundList.billUrl)">
              <span>查看</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="large" @click="handleClose">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { onFileOpen } from "@/utils/index";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const dialogVisible = ref();
const loading = ref(false);
const ruleForm = ref({});
const rules = ref({});
const ruleFormRef = ref();

const handleOpen = async (item) => {
  loading.value = true;
  dialogVisible.value = true;
  try {
    const url = "/sellerTaxRefundList/getById";
    const params = {
      id: item.id,
    };
    const res = await proxy.$get({ url, params });
    ruleForm.value = res
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleClose = () => {
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};
defineExpose({
  handleOpen,
});
</script>

